<!-- eslint-disable no-unused-vars -->
<!-- 商品选择弹出窗 -->
<template>
	<div>
		<el-dialog title="商品选择" v-model="state.isShowDialog" center class="borderRadius10" width="1420">
			<div class="system-role-padding layout-padding-auto">
				<el-card shadow="never" class="pageQueryBoxArea" style="border: none;">
					<el-form :model="state.param" :inline="true">
						<el-form-item label="展示方式：">
							<el-select :disabled="state.showTypeStatus != null" v-model="state.param.showType" placeholder="请选择展示方式" @change="modeChange()">
								<el-option v-for="item in state.query.showTypeList" :key="item.value"
									:label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="商品来源：">
							<el-select v-model="state.param.source" placeholder="请选择商品来源" @change="modeChange()">
								<el-option v-for="item in state.query.sourceList" :key="item.dictValue"
									:label="item.dictName" :value="item.dictValue" />
							</el-select>
						</el-form-item>
						<el-form-item label="商品品牌：">
							<el-select v-model="state.param.brand" placeholder="请选择商品品牌" @change="modeChange()">
								<el-option v-for="item in state.query.brandList" :key="item.brandId"
									:label="item.brandName" :value="item.brandId" />
							</el-select>
						</el-form-item>
						<el-form-item label="商品属性：" >
							<el-select v-model="state.param.type" placeholder="请选择商品类型" @change="modeChange()">
								<el-option v-for="item in state.query.typeList" :key="item.dictValue"
									:label="item.dictName" :value="item.dictValue" />
							</el-select>
						</el-form-item>

						<el-form-item label="销售渠道：">
							<el-select v-model="state.param.channel" placeholder="请选择门店状态" @change="modeChange()">
								<el-option v-for="item in state.query.saleChannelList" :key="item.dictValue"
									:label="item.dictName" :value="item.dictValue" />
							</el-select>
						</el-form-item>
						<el-form-item label="销售终端：" v-if="state.param.channel == 1 || state.param.channel == 2">
							<el-select v-if="state.param.channel == 1" v-model="state.param.terminal" 
								placeholder="请选择销售门店" @change="modeChange()">
								<el-option v-for="item in state.query.storeSaleTerminal" :key="item.id"
									:label="item.name" :value="item.id" />
							</el-select>
							<el-select v-if="state.param.channel == 2" v-model="state.param.terminal" 
								placeholder="请选择线上渠道" @change="modeChange()">
								<el-option v-for="item in state.query.shopSaleTerminal" :key="item.dictValue"
									:label="item.dictName" :value="item.dictValue" />
							</el-select>
						</el-form-item>
						<el-form-item label="商品分类：" v-if="state.param.channel == 1 || state.param.channel == 2">
							<el-cascader v-if="state.param.channel == 1" v-model="state.param.sort"
								placeholder="请选择门店商品分类" :options="state.query.storeSortList"
								:props="{ label: 'text', value: 'id', children: 'children' }" />
							<el-cascader v-if="state.param.channel == 2" v-model="state.param.sort"
								placeholder="请选择商城商品分类" :options="state.query.shopSortList"
								:props="{ label: 'text', value: 'id', children: 'children' }" />
						</el-form-item>
						<el-form-item label="商品搜索：">
							<el-input v-model="state.param.keyWords" placeholder="请输入关键字搜索" clearable></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="search()">
								<el-icon>
									<ele-Search />
								</el-icon> 搜 索
							</el-button>
						</el-form-item>
					</el-form>
				</el-card>
				<el-card shadow="never" class="pageContentArea" style="display: flex;flex-direction: column;flex: 1;height: inherit;border: none;">
					<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
						<el-tabs style="display: none;">
							<el-tab-pane name="one">
								<template #label>
									<span> 出售中的商品({{state.onSalesNum}}) </span>
								</template>
							</el-tab-pane>
							<el-tab-pane name="two">
								<template #label>
									<span> 仓库中的商品{{state.onStockNum}} </span>
								</template>
							</el-tab-pane>
							<el-tab-pane name="three">
								<template #label>
									<span> 已经售罄商品{{state.outSellNum}} </span>
								</template>
							</el-tab-pane>
							<el-tab-pane name="four">
								<template #label>
									<span> 回收站的商品{{state.outRecycleNum}} </span>
								</template>
							</el-tab-pane>
						</el-tabs>
						<el-row class="mt10 mb10" style="display: none;">
							<el-col class="contentMenuBox">
								<el-button class="mr15" type="primary" @click="addCommodity('add')">
									<el-icon>
										<ele-Plus />
									</el-icon> 新 增
								</el-button>
								<el-dropdown class="mr15">
									<el-button>
										批量修改&nbsp;<el-icon> <ele-ArrowDown /></el-icon>
									</el-button>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item>会员价</el-dropdown-item>
											<el-dropdown-item>关联门店</el-dropdown-item>
											<el-dropdown-item>商品分类</el-dropdown-item>
											<el-dropdown-item>物流设置</el-dropdown-item>
											<el-dropdown-item>购买送积分</el-dropdown-item>
											<el-dropdown-item>购买送优惠券</el-dropdown-item>
											<el-dropdown-item>关联商品标签</el-dropdown-item>
											<el-dropdown-item>活动推荐</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
								<el-button>
									<el-icon>
										<ele-Download />
									</el-icon> 导 出
								</el-button>
							</el-col>
						</el-row>
						<el-table v-if="state.param.showType == 0" v-loading="state.loading" :data="state.tableData" 
							row-key="spuId" ref="goodSpuTableRef"
							@select-all="handleSelectionChange" @select="secectItemFun">
							<el-table-column type="expand" width="1">
								<template #default="props">
									<section v-if="props.row.isShowSkuList">
										<expandSkuMsg ref="expandSkuMsgRef" :spuId="props.row.spuId" :selectIdData=state.selectIdData :skuTableData="props.row.skuList"></expandSkuMsg>
									</section>
									<section class="ml80 mr80" v-if="props.row.isShowSpuMsg">
										<el-row>
											<el-col :span="5" class="mb10">
												<span>操作人：{{ props.row.updateBy }}</span>
											</el-col>
											<el-col :span="5" class="mb10">
												<span>创建人：{{ props.row.createdBy }}</span>
											</el-col>
											<el-col :span="5" class="mb10">
												<span>操作时间：{{ props.row.updateTime }}</span>
											</el-col>
											<el-col :span="5" class="mb10">
												<span>创建时间：{{ props.row.createdTime }}</span>
											</el-col>
										</el-row>
									</section>
								</template>
							</el-table-column>
							<el-table-column label="" width="20">
								<template #default="scope">
									<el-icon title="展开商品其他信息" @click="expandSpuMsg(scope.row)">
										<ele-CaretRight v-if="!scope.row.isShowSpuMsg"/>
										<ele-CaretBottom v-if="scope.row.isShowSpuMsg"  />
									</el-icon>
								</template>
							</el-table-column>
							<el-table-column type="selection" width="30" :reserve-selection=true />
							<el-table-column label="SPU" width="90" >
								<template #default="scope">
									<span>{{ scope.row.spuId }}</span>
								</template>
							</el-table-column>
							<el-table-column label="图片" width="90">
								<template #default="scope">
									<div style="display: flex;justify-content:flex-start;align-items: center;">
										<el-icon title="展开商品Sku"  @click="expandSkuList(scope.row)">
											<ele-Plus v-if="!scope.row.isShowSkuList"/>
											<ele-Minus v-if="scope.row.isShowSkuList"/>
										</el-icon>
										<el-image class="borderRadius5 ml5 mr20" style="width:32px; height: 32px;" :src="scope.row.imgUrl"
											fit="cover" />
									</div>
								</template>
							</el-table-column>
							<el-table-column label="品牌"  >
								<template #default="scope">
									<span>{{ scope.row.brandIdName }}</span>
								</template>
							</el-table-column>
							<el-table-column label="商品名称" width="380" class-name="aaaa">
								<template #default="scope">
									<span class="ellipsis2">{{ scope.row.spuName }}</span>
								</template>
							</el-table-column>
							<el-table-column label="零售价" >
								<template #default="scope">
									<span style="display: flex;align-items: center;"> ￥{{ scope.row.priceRange }}&nbsp;
										<el-icon class="iconfont-warp-value"> <ele-Edit /> </el-icon> 
									</span>
								</template>
							</el-table-column>
							
							<el-table-column label="销售渠道">
								<template #default="scope">
									<span>{{ scope.row.salesChannelName }}</span>
								</template>
							</el-table-column>
							<el-table-column label="来源">
								<template #default="scope">
									<span>{{ scope.row.sourceName }}</span>
								</template>
							</el-table-column>
							<template #empty>
								<el-empty description="暂无数据" />
							</template>
							<!-- <el-table-column label="排序">
								<template #default="scope">
									<el-popover :width="160" trigger="click">
										<template #reference>
											<span style="display: flex;align-items: center;"> {{ scope.row.sortNumber }}&nbsp;
												<el-icon class="iconfont-warp-value"> <ele-Edit /> </el-icon> 
											</span>
										</template>
										<section class="flex">
											<el-input v-model="scope.row.spuI" class="font14 mr10" style="height: 30px;line-height: 30px;" placeholder="排序">
												<template #append>
													<el-button type="primary" class="font14" style="height: 30px;line-height: 30px;">
														确 认
													</el-button>
												</template>
											</el-input>
										</section>
									</el-popover>
								</template>
							</el-table-column> -->
							<!-- <el-table-column label="状态">
								<template #default="scope">
									<el-switch @click="changeStatusFun('spu',scope.row)" v-model="scope.row.onSelf"  :active-value=1 :inactive-value=0 />
								</template>
							</el-table-column>
							<el-table-column label="操作" width="120">
								<template #default="scope">
									<span class="pointer font16" style="color:var(--el-color-primary);"> 详情 </span>
									<span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
									<el-dropdown>
										<span style="color:var(--el-color-primary);" class="pointer font16"> 操作 </span>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item @click="addCommodity('edit',scope.row.spuId)">编辑</el-dropdown-item>
												<el-dropdown-item>会员价</el-dropdown-item>
												<el-dropdown-item>关联门店</el-dropdown-item>
												<el-dropdown-item>物流设置</el-dropdown-item>
												<el-dropdown-item>购买送积分</el-dropdown-item>
												<el-dropdown-item>购买送优惠券</el-dropdown-item>
												<el-dropdown-item>关联商品标签</el-dropdown-item>
												<el-dropdown-item>活动推荐</el-dropdown-item>
												<el-dropdown-item @click="delFun('spu',scope.row.spuId)">删除</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
								</template>
							</el-table-column> -->
						</el-table>
						<el-table v-if="state.param.showType == 1" v-loading="state.loading" :data="state.tableData" row-key="skuId" 
							ref="goodSkuTableRef" @selection-change="skuSelectionChangeFun">
							<el-table-column type="expand" width="1">
								<template #default="props">
									<section class="ml80 mr80" v-if="props.row.isShowSkuMsg">
										<el-row>
											<el-col :span="5" class="mb10">
												<span>操作人：{{ props.row.updateBy }}</span>
											</el-col>
											<el-col :span="5" class="mb10">
												<span>创建人：{{ props.row.createdBy }}</span>
											</el-col>
											<el-col :span="5" class="mb10">
												<span>操作时间：{{ props.row.updateTime }}</span>
											</el-col>
											<el-col :span="5" class="mb10">
												<span>创建时间：{{ props.row.createdTime }}</span>
											</el-col>
										</el-row>
									</section>
								</template>
							</el-table-column>
							<el-table-column label="" width="20" >
								<template #default="scope">
									<el-icon title="展开商品其它信息"  @click="expandSkuMsgFun(scope.row)">
										<ele-CaretRight v-if="!scope.row.isShowSkuMsg"/>
										<ele-CaretBottom v-else-if="scope.row.isShowSkuMsg"  />
									</el-icon>
								</template>
							</el-table-column>
							<el-table-column type="selection" width="30" :reserve-selection=true />
							<el-table-column label="SKU" width="90"  >
								<template #default="scope">
									<span>{{ scope.row.skuId }}</span>
								</template>
							</el-table-column>
							<el-table-column label="图片" width="90">
								<template #default="scope">
									<div style="display: flex;justify-content:center;align-items: center;">
										<el-image style="width:32px;height: 32px;" :src="scope.row.imgUrl" fit="cover" />
									</div>
								</template>
							</el-table-column>
							<el-table-column label="品牌"  >
								<template #default="scope">
									<span> {{ scope.row.brandIdName }}</span>
								</template>
							</el-table-column>
							<el-table-column label="商品名称" width="380" class-name="aaaa">
								<template #default="scope">
									<span> {{ scope.row.spuName }} {{ scope.row.skuList[0].skuSerialName }}</span>
								</template>
							</el-table-column>
							<el-table-column label="属性">
								<template #default="scope">
									<span>{{ scope.row.skuList[0].skuTypeName }}</span>
								</template>
							</el-table-column>
							<el-table-column label="规格">
								<template #default="scope">
									<span>{{ scope.row.skuList[0].skuSerialName }}</span>
								</template>
							</el-table-column>
							<el-table-column label="零售价">
								<template #default="scope">
									<span>{{ scope.row.skuList[0].retailPrice }}元</span>
								</template>
							</el-table-column>
							<el-table-column label="来源">
								<template #default="scope">
									<span>{{ scope.row.sourceName }}</span>
								</template>
							</el-table-column>
							<el-table-column label="销售渠道">
								<template #default="scope">
									<span>{{ scope.row.salesChannelName }}</span>
								</template>
							</el-table-column>
							<!-- <el-table-column label="状态">
								<template #default="scope">
									<el-switch @click="changeStatusFun('sku',scope.row)" v-model="scope.row.onSelf"  :active-value=1 :inactive-value=0 />
								</template>
							</el-table-column>
							<el-table-column label="操作" width="120">
								<template #default="scope">
									<span class="pointer font16" style="color:var(--el-color-primary);" > 详情 </span>
									<span style="color:var(--el-color-primary);">&nbsp;|&nbsp;</span>
									<el-dropdown>
										<span style="color:var(--el-color-primary);" class="pointer font16"> 操作 </span>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item @click="addCommodity('edit',scope.row.spuId)">编辑</el-dropdown-item>
												<el-dropdown-item>会员价</el-dropdown-item>
												<el-dropdown-item>关联门店</el-dropdown-item>
												<el-dropdown-item>物流设置</el-dropdown-item>
												<el-dropdown-item>购买送积分</el-dropdown-item>
												<el-dropdown-item>购买送优惠券</el-dropdown-item>
												<el-dropdown-item>关联商品标签</el-dropdown-item>
												<el-dropdown-item>活动推荐</el-dropdown-item>
												<el-dropdown-item @click="delFun('sku',scope.row.skuId)">删除</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
								</template>
							</el-table-column> -->
						</el-table>
						<el-row justify="end">
							<el-col :span="24" class="flex-end-center">
								<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
									:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
									v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
									:total="state.total">
								</el-pagination>
							</el-col>
						</el-row>
					</section>
				</el-card>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit">确 认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { reactive,onMounted, nextTick,watch, ref, defineAsyncComponent} from 'vue';
const emit = defineEmits(['goodsSubmitFun'])
import { useRouter } from 'vue-router';
import { configData,storeList } from "/@/api/common";
import { productList, productChangeOnSelf, spuDelete, skuDelete ,brandList,productCategoryList, } from '/@/api/commodity';
import { ElMessageBox, ElMessage, ElTable } from 'element-plus';

// 引入组件
const expandSkuMsg = defineAsyncComponent(() => import('/@/components/dialog/expandSkuMsg.vue'));
const router = useRouter();
// 定义变量内容
const expandSkuMsgRef = ref();
const goodSpuTableRef = ref<InstanceType<typeof ElTable>>();
const goodSkuTableRef = ref();
const goodSkuListRef = ref()
// 定义变量内容
const props = defineProps({
	// 是否多选
	isMultiSelect: {
		type: Boolean,
		default: () => true,
	},
});


const state = reactive({
	isShowDialog:false,
	showTypeStatus:0, //展示状态限制
	param: {
		showType: 0, // 商品展示方式 
		source: -1, // 商品来源
		brand: -1, // 商品品牌
		type: -1, // 商品属性
		channel: -1, // 商品销售渠道
		sort: -1, // 商品分类
		terminal: null, // 销售终端
		keyWords:'', // 搜索关键字
		pageNum: 1,
		pageSize: 10,
	},
	query: {
		// 展示方式
		showTypeList: [
			{ value: 0, label: 'SPU列表' },
			{ value: 1, label: 'SKU列表' }
		],
		// 商品来源
		sourceList: [] as Array<any>,
		// 商品品牌
		brandList: [] as Array<any>,
		// 商品属性
		typeList: [] as Array<any>,
		// 销售渠道
		saleChannelList: [] as Array<any>,
		// 商品分类列表
		shopSortList: [] as Array<any>,
		storeSortList: [] as Array<any>,
		// 销售终端列表(根据渠道区分，线上渠道取线上终端，门店渠道取门店终端)
		shopSaleTerminal: [] as Array<any>,
		storeSaleTerminal: [] as Array<any>,
	},
	onSalesNum: 0,
	onStockNum: 0,
	outSellNum: 0,
	outRecycleNum: 0,
	loading: false,
	total: 0,
	tableData: [],
	// 选中的spu数据
	selectIdData:[],
	// 选中的sku数据
	selectSkuIdData:[]
});


 

const secectItemFun = (selection:any, row:any) => {
	{{console.log("spu单切换")}}
	const selected = selection.some((s: any) => s == row);
	if (selected) {
		let skuIDlist = row.skuList.map((item: { skuId: any; }) => item.skuId); 
		state.selectIdData.push({
			spuId: row.spuId,
			skuId: skuIDlist
		})
		// 选中
		console.log('勾选行：', row);
	} else {
		state.selectIdData = state.selectIdData.filter(function(item) {  
			return item.spuId !== row.spuId; // 保留 id 不等于 3 的对象  
		});
		// 取消选中
		console.log('取消勾选行：', row);
	}
};


const handleSelectionChange = (val:any) => {
	console.log("spu全切换")
	if(val.length == 0){
		state.selectIdData = [];
	}else{
		let aaa: { spuId: any; skuId: any; }[] = []
		val.forEach((item:any) => {
			let skuIDlist = item.skuList.map((item: { skuId: any; }) => item.skuId);
			aaa.push({
				spuId: item.spuId,
				skuId: skuIDlist
			})
		});
		state.selectIdData = aaa
	}
};

const skuSelectionChangeFun = (val:any) => {
	console.log("spu全切换")
	if(val.length == 0){
		state.selectSkuIdData = [];
	}else{
		let skuIDlist = val.map((item: { skuId: any; }) => item.skuId);
		state.selectSkuIdData = skuIDlist
	}
};

watch(() => state.selectIdData, () => { 
        setTimeout(() => {
			state.tableData.forEach((item:any) => {
				if (state.selectIdData.find(itemx => itemx.spuId === item.spuId)) {
					// 把判断出来的默认表格数据push到创建的数组中
					goodSpuTableRef.value!.toggleRowSelection(item, true)
				}else{
					goodSpuTableRef.value!.toggleRowSelection(item, false)
				}
			});
		}, 100);
	},
    {
        deep: true,
        immediate: true
    }
);

// 展示商品sku相关信息
const expandSkuMsgFun = (row?: any) => {
	if(row.isShowSkuMsg){
		// sku相关信息表展开状态
		row.isShowSkuMsg = false;
		goodSkuTableRef.value.toggleRowExpansion(row);
	}else{ // 未打开
		row.isShowSkuMsg = true;
		goodSkuTableRef.value.toggleRowExpansion(row);
	}
};

// 打开弹窗
const openDialog = (type:number) => {
	state.isShowDialog = true;
	state.selectIdData = [];
	state.selectSkuIdData = [];
	state.showTypeStatus = type;
	if(state.showTypeStatus != null){
		state.param.showType = type
	}
	nextTick(() => {
        // 获取商品品牌列表
        getBrandList();
        // 获取门店列表
        getStoreList();
        // 获取商品分类列表
        getStoreCategoryList();
        getShopCategoryList();
        // 获取系统配置项
        getConfigDataFun();
        // 获取商品列表
		getGoodsList();
	});
};


// 品牌列表获取
const getBrandList = async () => {
	const { results } = await brandList({ mode: null });
	state.query.brandList = results.records;
	state.query.brandList.unshift({brandName:'全部',brandId:-1})
}


const getConfigDataFun = async () =>{
	let params = {
		dictType: ''// 数组传空默认全部
	}
	const { results } = await configData(params);
	state.query.sourceList = results.source; // 商品来源;
	state.query.sourceList.unshift({dictName:'全部',dictValue:-1})
	state.query.typeList = results.spuType1; // 商品属性
	state.query.typeList.unshift({dictName:'全部',dictValue:-1})
	state.query.saleChannelList = results.salesChannel; // 销售渠道；
	state.query.saleChannelList.unshift({dictName:'全部',dictValue:-1})
	state.query.shopSaleTerminal = results.salesOnlineChannel; // 线上销售渠道
	state.query.shopSaleTerminal.unshift({dictName:'全部',dictValue:-1})
}

// 门店商品分类获取
const getStoreCategoryList = async () => {
	const { results } = await productCategoryList({ platformType: 0 });
	state.query.shopSortList = results;
}

// 商城商品分类获取
const getShopCategoryList = async () => {
	const { results } = await productCategoryList({ platformType: 1 });
	state.query.storeSortList = results;
}

// 门店类型切换 (如果不是全部则清空选中门店 以及订单选中状态)
const modeChange = () => {
	getGoodsList();
}

// 获取门店列表
const getStoreList = async() => {
    state.loading = true;
	const { results } = await storeList({});
	state.loading = false;
	state.query.storeSaleTerminal = results.records;
};

// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

// 获取商品列表
const getGoodsList = async () => {
	if(state.showTypeStatus == 0){
		state.param.showType = 0
	}else if(state.showTypeStatus == 1){
		state.param.showType = 0
	}
	state.loading = true;//不用传参， 请求得入参在上面都定义了 param这里吗？
	let params = {
		spuType: 1, // 普通商品
		showType: state.param.showType,
		pageNum: state.param.pageNum,
		pageSize: state.param.pageSize,
	}
	if(state.param.showType == 0){
		const { results,onSalesNum,onStockNum,outSellNum,outRecycleNum } = await productList(params);
		state.tableData = results.records.map((obj: any) => ({  
			...obj,  
			isExpand:false,
			isShowSpuMsg:false, 
			isShowSkuList:false,  
		}));
		state.loading = false;
		state.total = results.total;
		state.onSalesNum = onSalesNum;
		state.onStockNum = onStockNum;
		state.outSellNum = outSellNum;
		state.outRecycleNum = outRecycleNum;
		setTimeout(() => {
		// 假设我们要默认勾选 id 为 1 的行
			state.tableData.forEach((item:any) => {
				if (state.selectIdData.find(itemx => itemx.spuId === item.spuId)) {
					// 把判断出来的默认表格数据push到创建的数组中
					goodSpuTableRef.value!.toggleRowSelection(item, true)
				}
			});
		}, 100);
	}else if(state.param.showType == 1){
		const { results,onSalesNum,onStockNum,outSellNum,outRecycleNum } = await productList(params);
		state.tableData = results.records.map((obj: any) => ({  
			...obj,  
			isShowSkuMsg:false,
		}));
		state.loading = false;
		state.total = results.total;
		state.onSalesNum = onSalesNum;
		state.onStockNum = onStockNum;
		state.outSellNum = outSellNum;
		state.outRecycleNum = outRecycleNum;
	}
}

// 分页点击条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
    getGoodsList();
};

// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
    getGoodsList();
};

// 展开商品sku列表点击sku列表
const expandSkuList = async (row: any) => {
	// 当前expand信息展开状态时 且sku列表展开时直接关闭expand
	if(row.isShowSkuList){
		row.isShowSkuList = false;
		goodSpuTableRef.value.toggleRowExpansion(row);
	}else{
		// sku 展开时关闭msg	
		row.isShowSkuList = true;
		if(row.isShowSpuMsg){
			row.isShowSpuMsg = false;
		}else{
			goodSpuTableRef.value.toggleRowExpansion(row);
		}
	}
};


// 点击spu其他信息
const expandSpuMsg = (row?: any) => {
	// expand 展开
	if(row.isShowSpuMsg){
		// sku相关信息表展开状态
		row.isShowSpuMsg = false;
		goodSpuTableRef.value.toggleRowExpansion(row);
	}else{ // 未打开
		// msg 展开时关闭sku	
		row.isShowSpuMsg = true;
		if(row.isShowSkuList){
			row.isShowSkuList = false;
		}else{
			goodSpuTableRef.value.toggleRowExpansion(row);
		}
	}
};
// 控制单选——table选择项发生变化时
const selectClick = (selection :any) => {
  if (selection.length > 1) {
    let del_row = selection.shift();
    goodSkuListRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
  }
}

// 商品选中
// const handleSelectionChange = (val:any) =>{
// 	if(!props.isMultiSelect){
// 		// 清除之前的选择
// 	}
// 	let arr = val.map((item: any) => {
// 		let isFind = state.selectList.find((x:any) => x.id === item.id)

// 		return { ...item, 
// 			handselNumber: isFind== undefined ?  1 : isFind.handselNumber, 
// 			customPrice:0.00
// 		};  
// 	})
// 	state.selectList = arr
// }

// 确认
const onSubmit = () => {
	let skulist = [] as Array<any>
	// spu
	if(state.param.showType == 0){
		// 使用 flatMap 来展开 skuID 数组并映射成新对象  
		skulist = state.selectIdData.flatMap((item:any) => {  
			return item.skuId.map((id:any) => ({ spuId: item.spuId, skuId: id }));  
		});
	}
	if(state.param.showType == 1){
		skulist = state.selectSkuIdData;
	}
	// 单选
	// if(!props.isMultiSelect){
	// 	// 商品关联spu数据
	// 	if(skulist.length > 1){
	// 		return
	// 	}
	// }
	emit('goodsSubmitFun',  skulist,state.param.showType) ;
	state.isShowDialog = false;
}

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style scoped lang="scss">
.pageQueryBoxArea{
	:deep(.el-select){
		.el-input {
			width: 160px !important;
			height: 38px;
			line-height: 38px;
		}
	}
}

.singleChoice{
	:deep(.el-table th.el-table__cell:nth-child(1) .cell ){
		visibility: hidden;
	}
}

.el-form .el-form-item:last-of-type {
    margin-bottom: 18px !important;
}

// 隐藏expand 箭头
:deep(.el-table__expand-column){
    visibility: hidden;
}

:deep(.el-card__body){
	padding-top: 0px !important;
}

.pageContentArea{
	:deep(.el-card__body){
		padding-top: 10px;
		display: flex;
		flex-direction: column;
		flex: 1;
		height: inherit;
		.el-tabs{
			.el-tabs__header{
				margin-bottom: 0;
			}
		}
		.el-table{
			flex: 1;
			.el-table__inner-wrapper::before{
				background: none !important;
			}
			.iconfont-warp-value {
				&:hover {
					color: var(--el-color-primary);
					transition: all 0.2s ease;
				}
			}
			// &:hover {
			// 	box-shadow: 0 2px 12px var(--next-color-dark-hover);
			// 	cursor: pointer;
			// 	transition: all 0.3s ease;
			// 	.iconfont-warp-value {
			// 		i {
			// 			color: var(--el-color-primary);
			// 			transition: all 0.3s ease;
			// 		}
			// 	}
			// 	.iconfont-warp-label {
			// 		color: var(--el-color-primary);
			// 		transition: all 0.3s ease;
			// 	}
			// }
		
		}
		.contentMenuBox{
			.el-dropdown{
				.el-icon{
					margin-right: 0px !important;
				}
			}
		}
	}

	// 隐藏expand 箭头
	:deep(.el-table__expand-column){
		visibility: hidden;
	}
	:deep(.el-table .aaaa .cell ){
		justify-content: left;
		padding-left: 5px;
	}
}
</style>
